<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js">
        
    </script>
</head>
<body>
    <div id="app">
        
    </div>
    <div onclick="des()"> 销毁</div>
</body>
<script>
    let vm = new Vue({
        el:"#app",
        data:{
            title:'ss'
        },
        //vue 实例创建之前触发
        //无法访问实例 无法this
        beforeCreate(){
            console.log()
            console.log("vue 实例创建之前触发",this.title)
        },
        //vue实例创建成功
        //通常去初始化一些东西 或者请求接口
        created(){
            console.log("vue 实例创建成功" ,this.title)
        },
        //vue 视图层编译之前（页面渲染成功之前）
        beforeMount(){
            console.log("视图层编译之前",this.title)
        },
        //vue视图层编译成功
        //可以操作dom节点
        mounted(){
            console.log('视图编译成功' ,this.title)
        },
        beforeUpdate(){
            console.log("数据更新之前" ,this.title)
        },
        updated(){
            console.log("数据更新之后",this.title)
        },
        beforeDestroy(){
            console.log("vue实例销毁之前",this.title)
        },
        destroyed(){
            console.log("vue实例销毁之后",this.title)
        },
        methods:{
        
        }
        //vue 实例 从创建 到销毁的过程 每个阶段都会触发对应的方法 ，那么这个方法 就叫生命周期函数 生命周期钩子
    })
    function des(){
        vm.$destroy()//销毁实例方法
    }
</script>
</html>